// 使用 Vue Router 时导入了一个名为 RouteRecordRaw 的类型。
// RouteRecordRaw 是一个接口，用于描述路由记录的基本信息、约束路由配置的格式
// 使用 RouteRecordRaw 类型，在定义路由时可以更清晰地指定每个路由的属性，包括路由路径、组件、元数据等。
// 这个类型的导入可以帮助开发者在编写路由时更加方便地使用类型检查和自动补全功能。
import type { RouteRecordRaw } from 'vue-router'

/**
 * 静态路由（默认路由）
 */
export const staticRoutes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
    meta: {
      hidden: true
    }
  },

  {
    path: '/404',
    name: '404',
    component: () => import('@/views/error/404.vue'),
    meta: {
      // 在左侧菜单不显示该路由
      hidden: true
    }
  },

  {
    path: '/', // 根路由
    component: () => import('@/layout/index.vue'), // 路由懒加载
    redirect: '/home', // 重定向到 /home 路由(在 children 子组件中)
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('@/views/home/index.vue'),
        // 路由元信息，自定义属性
        meta: {
          title: '首页',
          icon: 'ele-HomeFilled'
        }
      }
    ]
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/Test/index.vue'),
    meta: {
      // 在左侧菜单不显示该路由
      hidden: true
      // name: '测试'
    }
  },

  /* 匹配任意的路由 必须最后注册 */
  {
    // Vue-Router3 匹配任意的路由使用*（星标或通配符）

    // Vue-Router4 删除了 *（星标或通配符）路由
    // 现在必须使用自定义的 regex 参数来定义所有路由(*、/*)

    // 例如："/:pathMatch(.*)*" 会匹配到不存在的路由地址
    // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下

    // { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
    // { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },
    // 带与不带最后一个 * 的区别就是：pathMatch 对应的参数是一个数组还是字符串

    path: '/:pathMatch(.*)*',
    name: 'Any',
    // redirect: '/404',
    component: () => import('@/views/error/404.vue'),
    meta: {
      hidden: true
    }
  }
]

/**
 * 定义动态路由
 */
export const allAsyncRoutes: Array<RouteRecordRaw> = [
  {
    path: '/product',
    name: 'Product',
    component: () => import('@/layout/index.vue'),
    meta: {
      title: '商品管理',
      icon: 'ele-Goods'
    },
    children: [
      {
        path: '/trademark',
        name: 'Trademark',
        component: () => import('@/views/Product/Trademark/index.vue'),
        meta: {
          title: '品牌管理'
        }
      },
      {
        path: '/attr',
        name: 'Attr',
        component: () => import('@/views/Product/Attr/index.vue'),
        meta: {
          title: '平台属性管理'
        }
      },
      {
        path: '/spu',
        name: 'Spu',
        component: () => import('@/views/Product/Spu/index.vue'),
        meta: {
          title: 'spu管理'
        }
      },
      {
        path: '/sku',
        name: 'Sku',
        component: () => import('@/views/Product/Sku/index.vue'),
        meta: {
          title: 'sku管理'
        }
      }
    ]
  }
]
